<template>
	<view class="ranking">
		<view class="bgheader"></view>
		<view class="rankList">
			<view class="bar" v-if="visible">
				<view class="flex flex-column justify-center align-center " @click="rank(1)"
					:class="visible==1?'active':'baritem'">
					<text>组织榜单</text>
					<view v-if="visible==1"
						style="height: 8rpx; background-color: #f96400; width: 80rpx; border-radius: 20rpx;margin-top: 5rpx;">
					</view>
				</view>
				<view class="flex flex-column justify-center align-center" @click="rank(2)"
					:class="visible==2?'active':'baritem'">
					<text>个人榜单</text>
					<view v-if="visible==2"
						style="height: 8rpx; background-color: #f96400; width: 80rpx; border-radius: 20rpx;margin-top: 5rpx;">
					</view>
				</view>
			</view>
			<view class="table">
				<view class="theader">
					<view class="item">{{visible == 1 ? '星级' : '排名'}}</view>
					<view class="item">组织</view>
					<view class="item">活动时长</view>
					<view class="item">积分</view>

				</view>

				<view v-if="visible == 1 &&　teamData" v-for="(item,index) in teamData" :key="item">
					<view class="tbody" v-if="index < 10">
						<view class="item flex align-center justify-center">
							<uni-rate v-model="item.starRating" :readonly="true" @change="onChange" size="14" />
						</view>
						<view class="item ">
							<view class="team_name">{{item.organizationNameOrganizationName}}</view>
						</view>
						<view class="item">{{item.activityHours || 0}}h</view>
						<view class="item"><text style="color: red;">{{item.qtyPoints}}</text></view>
					</view>
				</view>


				<view  v-if="visible == 2 &&　personData" v-for="(item,index) in personData" :key="item">
					<view class="tbody" v-if="index < 10">
						<view v-if="index < 3" class="item flex align-center justify-center">

							<image class="seq" :src="`../../static/image/ranking${index+1}.png`" mode="aspectFill">
							</image>
						</view>
						<view v-else class="item flex align-center justify-center">
							{{index + 1}}
						</view>
						<view class="item ">
							<view class="team_name">{{item.nameName}}</view>
						</view>
						<view class="item">{{item.activityHours || 0}}h</view>
						<view class="item"><text style="color: red;">{{item.integral}}</text></view>
					</view>

				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import request from '../../api/index.js'

	const visible = ref(1);
	const commonData = ref([])
	const teamData = ref([])
	const personData = ref([])

	function rank(index) {
		if (index == 1) {
			visible.value = 1
			getTeamData()
		} else {
			visible.value = 2
			getPersonData()

		}
	}
	const getTeamData = () => {
		request({
			url: '/api/volunteer/organizational-points/page?formName=OrganizationalPoints',
			method: 'GET',
			data: {
				sort: {
					"qtyPoints": "descend"
				},

			}
		}, e => {
			if (e.success) {
				console.log('e-------------', e.data.records)
				teamData.value = e.data.records



			}
		})
	}

	const getPersonData = () => {
		request({
			url: '/api/volunteer/member-points/page?formName=MemberPoints',
			method: 'GET',
			data: {
				sort: {
					"integral": "descend"
				},

			}
		}, e => {
			if (e.success) {
				console.log('e-------------', e.data.records)
				personData.value = e.data.records

			}
		})
	}

	onMounted(() => {
		getTeamData();
	})
</script>

<style lang="scss" scoped>
	.ranking {
		.bgheader {
			background: no-repeat center/100% url('../../static/bg/rankbg.png');
			// padding-top: 700rpx;
			height: 700rpx;
		}

		.rankList {
			transform: translateY(-300rpx);
			margin: 0 30rpx;
			border-radius: 16rpx 16rpx 0 0;
			overflow: hidden;

			.bar {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				text-align: center;
				font-size: 34rpx;
				border-radius: 16rpx; // margin: 20rpx;
			}

			.theader {
				color: #b2b2b2;
			}

			.theader,
			.tbody {
				display: grid;
				grid-template-columns: 1.2fr 1.7fr 1.4fr 1fr;
				text-align: center;
				background-color: #fff;
				height: 100rpx;
				font-size: 30rpx;
				line-height: 100rpx;

				.item {
					.seq {
						width: 46rpx;
						height: 46rpx;
					}
				}

				.team_name {
					max-width: 250rpx;
					white-space: nowrap;
					/*超出的空白区域不换行*/
					overflow: hidden;
					/*超出隐藏*/
					text-overflow: ellipsis;
					/*文本超出显示省略号*/


				}
			}
		}
	}

	.active {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 16rpx 16rpx 0 0;
	}

	.baritem {
		margin-top: 10rpx;
		border-radius: 16rpx 16rpx 0 0;
		padding: 25rpx;
		color: #7F756E;
		font-weight: 500;
		background-image: linear-gradient(#ffd9bf, #ffffff);

	}
</style>